<template>
  <div class="container">
    <div class="content">
        <div class="grid-content left-content"></div>
        <!-- <el-divider direction="vertical" class="line"></el-divider> -->
        <div class="grid-content right-content">
            <div class="login-register">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" 
                background-color="#3F85ED">
                <el-menu-item index="1">登 录</el-menu-item>
                <el-menu-item index="2">注 册</el-menu-item>
                </el-menu>
                <transition name="el-fade-in-linear" mode="out-in">
                  <router-view></router-view>
                </transition>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect (i) {
      switch (i) {
        case '1':
          this.$router.push('/home/login')
          break
        case '2':
          this.$router.push('/home/register')
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background: url('/static/img/shouye.png') no-repeat center;
  background-size: 100% 100%;
}
.content {
  width: 75%;
  padding: 20px;
  height: 80%;
  position: relative;
  left: 50%;
  top: 50%;
  border-radius: 10px;
  display: flex;
  transform: translate(-50%, -50%);
}

.grid-content {
    height: 100%;
    width: 50%;
}

.line {
    height: 100%;
}

.login-register {
    position: relative;
    width: 400px;
    height: 600px;
    left: 50%;
    top: 50%;
    background-color: #3F85ED;
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    transform: translate(-50%, -50%);
}

.login-register-tab {
    padding: 0 20px;
}
</style>
